import { useEffect, useRef, useState } from "react"
import { Link, useNavigate, useSearchParams } from "react-router-dom"

import { observer } from "mobx-react"

import { Card, Breadcrumb, Form, Button, Radio, Input, Upload, Space, Select, message } from "antd"

import ReactQuill from "react-quill"
import "react-quill/dist/quill.snow.css"

import { articleDetail, articleAdd, articleEdit } from "@/api/main/article"

import { useStore } from "@/store"

import "./index.scss"

const { Option } = Select

const Publish = () => {
  const { channelStore } = useStore()


  // 提交表单
  const navigate = useNavigate()
  const onFinish = async values => {
    const { agreementNo, content, title, agreementType } = values
    const params = {
      agreementNo,
      content,
      title,
      agreementType
    }
    if (id) {
      params.id = id
      await articleEdit(params)
    } else {
      await articleAdd(params)
    }
    navigate("/article")
    message.success(`${id ? "更新成功" : "发布成功"}`)
  }

  const [form] = Form.useForm()
  const [params] = useSearchParams()
  const id = params.get("id")
  useEffect(() => {
    // 获取详情
    const loadDetail = async () => {
      const { data } = await articleDetail(id)
      // 更新表单数据
      form.setFieldsValue({ ...data })

    }
    id && loadDetail()
  }, [id, form])

  return (
    <div className="publish">
      <Card
        title={
          <Breadcrumb separator=">">
            <Breadcrumb.Item>
              <Link to="/home">首页</Link>
            </Breadcrumb.Item>
            <Breadcrumb.Item>{id ? "编辑" : "发布"}协议</Breadcrumb.Item>
          </Breadcrumb>
        }
      >
        <Form form={form} labelCol={{ span: 4 }} wrapperCol={{ span: 16 }} initialValues={{ type: 1, content: "" }} onFinish={onFinish}>
          <Form.Item label="协议编号" name="agreementNo" rules={[{ required: true, message: "请输入协议编号" }]}>
            <Input placeholder="请输入协议编号" style={{ width: 400 }} />
          </Form.Item>
          <Form.Item label="协议标题" name="title" rules={[{ required: true, message: "请输入协议标题" }]}>
            <Input placeholder="请输入协议标题" style={{ width: 400 }} />
          </Form.Item>
          <Form.Item label="协议类型" name="agreementType" rules={[{ required: true, message: "请选择协议类型" }]}>
            <Select placeholder="请选择协议类型" style={{ width: 400 }}>
              {channelStore.typeList.map(item => (
                <Option key={item.key} value={item.key}>
                  {item.value}
                </Option>
              ))}
            </Select>
          </Form.Item>

          <Form.Item label="内容" name="content" rules={[{ required: true, message: "请输入文章内容" }]}>
            <ReactQuill theme="snow" />
          </Form.Item>

          <Form.Item wrapperCol={{ offset: 4 }}>
            <Space>
              <Button size="large" type="primary" htmlType="submit">
                {id ? "更新" : "发布"}协议
              </Button>
            </Space>
          </Form.Item>
        </Form>
      </Card>
    </div>
  )
}

export default observer(Publish)
